<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页</title>
    <link rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="/css/common.css">
    <style>
        body{
            background: url("/image/fenxiBackground.png") no-repeat fixed;
            background-size: cover;
        }
        .topBox{
            position: relative;
            width: 100%;
            height: 20vh;
            opacity: 1;
        }
        .mainBox{
            position: relative;
            background: rgb(240, 240, 250);
            height: calc(100vh - 20vh);
            border-top-right-radius: 20px;
            border-top-left-radius: 20px;
            overflow-y: scroll;
        }
        .banner{
            border-top-right-radius: 20px;
            border-top-left-radius: 20px;
            padding: 20px;
            padding-bottom: 0;
            background: white;
        }
        .scrollPanel{
            background: white;
            margin: 20px;
            border-radius: 15px;
            padding-bottom: 80px;
        }
        .infiniteUl{
            position: relative;
            display: block;
            height: 120px;
            padding: 15px;
            border-bottom: 1px #8c939d solid;
            border-radius: 15px;
        }
        .buttons{
            margin: 20px auto 0;
            display: table;
            height: 70px;
            width: 100%
        }
        .buttons>div{
            display: table-cell;
            position: relative;
            padding-left: 20px;
            padding-right: 20px;
            width: 83.5px;
        }
        .buttonIcon{
            margin: 0 auto;
            width: 25px;
        }
        .buttonText{
            font-size: 0.7em;
            display: flow;
            color: #8c939d;
            /*text-align: center;*/
        }
        .tuijian{
            display: block;
            position: relative;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="topBox">
<!--        用户图标-->
        <div style="position: absolute;left: 15px;bottom: 8vh;width: 100%">
            <el-avatar size="small" :src="user.icon !== null ? user.icon : '/image/defaultUserIcon.png'"></el-avatar>
            <font
                    style="
                    display: inline-block;
                    font-family:Microsoft YaHei,Arial,sans-serif;
                    font-style: normal;
                    color: white;
                    font-size: 0.5em;
                    position: absolute;left: 42px;top: 8px"
            >{{user.nickname!==null ? user.nickname:"未命名用户"}}</font>
        </div>
<!--        搜索框-->
        <div style="position: absolute;left: 15px;bottom: 2vh">
            <el-input
                    placeholder="搜索内容"
                    v-model="searchInput"
                    clearable
                    size="small"
                    style="width: 80%"
            >
            </el-input>
        </div>
<!--        插图-->
        <img src="/image/zhuyedashujvIcon.png" style="width: 65vw;position: absolute;right: -8vw;bottom: 1vh;z-index: 100">
    </div>
    <div class="mainBox">
<!--        轮播图-->
        <div class="banner">
            <el-carousel trigger="click" height="150px">
                <el-carousel-item v-for="item in swipers" :key="item">
                    <div>
                        <img :src="item" style="height: 180px;width: 100%">
                    </div>
                </el-carousel-item>
            </el-carousel>
            <!--        九宫格按钮-->
            <div class="buttons">
                <div>
                    <img class="buttonIcon" src="/image/zhuyeIconbiji.png"/>
                    <div class="buttonText">笔记</div>
                </div>
                <div>
                    <img class="buttonIcon" src="/image/zhuyeIconshujv.png"/>
                    <div class="buttonText">数据</div>
                </div>
                <div>
                    <img class="buttonIcon" src="/image/zhuyeIconfenxi.png"/>
                    <div class="buttonText">分析</div>
                </div>
                <div>
                    <img class="buttonIcon" src="/image/zhuyeIconzhinan.png"/>
                    <div class="buttonText">指南</div>
                </div>
            </div>
<!--                第二行button-->
            <div class="buttons" style="margin-top: 0">
                <div>
                    <img class="buttonIcon" src="/image/zhuyeIconlishi.png"/>
                    <div class="buttonText">历史</div>
                </div>
                <div>
                    <img class="buttonIcon" src="/image/zhuyeIconkeshihua.png"/>
                    <div class="buttonText" style="position: absolute;left: 15px;bottom: 22px">可视化</div>
                </div>
                <div>
                </div>
                <div>
                </div>
            </div>
        </div>
<!--        无限滚动-->
        <div class="scrollPanel">
            <div style="padding: 10px;font-size: 1.5em;color: #086dff;font-weight: bolder;">热门推荐</div>
            <div class="infinite-list tuijian" v-infinite-scroll="load" style="overflow:auto">
                <li v-for="item in scrollPanel" class="infinite-list-item  infiniteUl" @click="toArticleDetail(item.id)">
                    <img :src="item.icon" style="height: 89px;width: 140px"/>
                    <div style="position: absolute;top: 20px;left: 170px">{{item.title}}</div>
                </li>
            </div>
        </div>
    </div>
</div>
</body>
<script src="/js/vue.js"></script>
<script src="/js/axios-0.18.0.js"></script>
<script src="/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el : "#app",
        mounted(){
            //验证用户
            let username = localStorage.getItem("user");
            axios({
                method : 'get',
                url : '/user?username='+username
            }).then((resp) => {
                this.user = resp.data.data
            })
            //获取文章信息
            axios({
                method : 'get',
                url : '/article'
            }).then((resp) => {
                this.scrollPanel = resp.data.data
            })
        },
        methods : {
            load() {
                // this.scrollPanel+=2;
                console.log('加载');
            },
            toArticleDetail(id){
                localStorage.removeItem('currentArticle');
                localStorage.setItem('currentArticle',id)
                window.location.href = '/mainPage/articleDetail';
            },
        },
        data(){
            return {
                swipers : [
                    '/image/swipers/swiper1.png',
                    '/image/swipers/swiper2.png',
                    '/image/swipers/swiper3.png',
                ],
                user: {
                    id : "",
                    username : "",
                    gender : "",
                    createTime : "",
                    status : "",
                    icon : "",
                    // password : "",
                    phoneNumber : "",
                    nickname : "",
                },
                searchInput: '',
                scrollPanel: [
                    {
                        id : null,
                        icon : null,
                        title : null,
                        context : null,
                        author : null,
                    },
                ],
            }
        }
    })
</script>
</html>